<template>
	<!-- 建议反馈 -->
	<view class="suggestionFeedback">
		<view class="idea" style="margin-bottom: 20rpx">
			<view class="idea-header"><text class="required">*</text>反馈类型</view>
			<uni-data-select v-model="queryData.feedback_type_id" :localdata="feedbackType"></uni-data-select>
		</view>

		<!-- 填写意见 -->
		<view class="idea">
			<view class="idea-header">
				<text class="required">*</text>
				填写意见
			</view>
			<view class="idea-content">
				<u--textarea v-model="queryData.content" placeholder="请输入内容,反馈内容长度为10-200个字符" count height="120" :maxlength="200"></u--textarea>
			</view>
		</view>

		<!-- 上传图片 -->
		<view class="uploadImage">
			<view class="uploadImage-header">
				<text style="font-weight: bold">上传图片</text>
				<text class="des">最多可上传3张图片，支持jpg，jpeg，png格式</text>
			</view>
			<view class="uploadImages">
				<uni-file-picker limit="3" :auto-upload="true" v-model="imageList" fileMediatype="image" mode="grid" @select="select" @delete="delIMG"></uni-file-picker>
			</view>
		</view>

		<!-- 填写联系方式 -->
		<view class="contactInformation">
			<view class="contactInformation-header">填写联系方式</view>
			<view class="contactInformation-form">
				<view class="contactInformation-form-item">
					<view class="contactInformation-form-item-lable">
						<text class="required"></text>
						您的称呼
					</view>
					<input type="text" class="itemInput" placeholder="请输入" v-model="queryData.name" style="font-size: 26rpx" />
				</view>
				<view class="contactInformation-form-item">
					<view class="contactInformation-form-item-lable">
						<text class="required"></text>
						手机号码
					</view>
					<input type="text" class="itemInput" placeholder="请输入" v-model="queryData.phone" style="font-size: 26rpx" />
				</view>
			</view>
		</view>

		<view class="subButton">
			<button type="primary" @click="getuserfeedback" style="background-color: #e43927; color: #fff; font-size: 28rpx">提交反馈</button>
		</view>
	</view>
</template>

<script>
import { userfeedbackType, userfeedback } from '../../api/home/index.js';
import { BASE_URL } from '../../api/baseurl.js';
import { validatePhoneNumber } from '../../utils/tools.js';
export default {
	data() {
		return {
			feedbackType: [],
			queryData: {
				feedback_type_id: '',
				name: '',
				phone: '',
				content: '',
				files: ''
			},
			tokenValue: '',
			imageList: []
		};
	},
	async onLoad() {
		this.getuserfeedbackType();
		this.tokenValue = (await uni.getStorageSync('token')) || '';
	},
	methods: {
		async getuserfeedbackType() {
			try {
				const resData = await userfeedbackType();
				let feedbackTypeList = resData.data;
				feedbackTypeList.forEach((item) => {
					this.feedbackType.push({
						value: item.id,
						text: item.type
					});
				});
			} catch (e) {
				throw Error(e);
			}
		},

		async getuserfeedback() {
			if(!this.queryData.feedback_type_id){
				return uni.showToast({
					title: '请选择反馈类型',
					icon: 'none'
				});
			}
			
			if (!this.queryData.content) {
				return uni.showToast({
					title: '请输入反馈内容',
					icon: 'none'
				});
			}

			if (this.queryData.content.length < 10) {
				return uni.showToast({
					title: '反馈内容长度为10-200个字符',
					icon: 'none'
				});
			}

			if (this.queryData.phone) {
				if (!validatePhoneNumber(this.queryData.phone)) {
					return uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
				}
			}

			const images = this.imageList.filter((item) => {
				return item.fullurl;
			});
			this.queryData.files = images.join(',');
			try {
				const resData = await userfeedback(this.queryData);
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack(-1);
				}, 500);
			} catch (e) {
				throw Error(e);
			}
		},

		//图片上传
		select(e) {
			for (let i = 0; i < e.tempFilePaths.length; i++) {
				let filePath = e.tempFilePaths[i];
				uni.uploadFile({
					url: BASE_URL + 'common/upload',
					filePath: filePath,
					name: 'file',
					header: { token: this.tokenValue },
					success: (uploadFileRes) => {
						let path = JSON.parse(uploadFileRes.data);
						this.imageList.push({
							url: path.data.fullurl,
							fullurl: path.data.url
						});
					}
				});
			}
		},

		//图片删除
		delIMG(e) {
			const num = this.imageList.findIndex((v) => v.url === e.tempFilePath);
			this.imageList.splice(num, 1);
		}
	}
};
</script>

<style scoped lang="scss">
@mixin boxBasics {
	background-color: #fff;
	box-sizing: border-box;
	padding: 30rpx;
	border-radius: 24rpx;
	padding-top: 0px;
}

@mixin textBasics {
	height: 90rpx;
	line-height: 90rpx;
	font-size: 27rpx;
}
.suggestionFeedback {
	box-sizing: border-box;
	padding: 20rpx;
	.idea {
		@include boxBasics();
		.idea-header {
			@include textBasics();
			font-weight: bold;
		}

		.idea-content {
			background-color: #f3f3f3;
			border-radius: 24rpx;
		}
	}

	.uploadImage {
		@include boxBasics();
		margin-top: 20rpx;
		.uploadImage-header {
			@include textBasics();
			.des {
				font-size: 24rpx;
				color: #999;
				padding-left: 8rpx;
			}
		}
	}

	.contactInformation {
		@include boxBasics();
		margin-top: 20rpx;
		.contactInformation-header {
			padding-top: 30rpx;
			font-weight: bold;
			padding-bottom: 10rpx;
			font-size: 27rpx;
		}

		.contactInformation-form {
			.contactInformation-form-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 90rpx;
				.itemInput {
					text-align: right;
				}
				.contactInformation-form-item-lable {
					font-weight: bold;
					font-size: 27rpx;
				}
			}
		}
	}

	.subButton {
		margin-top: 20rpx;
	}
}

.required {
	color: red;
	padding-right: 8rpx;
}
</style>
